<template>
  <a-card title="我的收藏夹">
    <a-collapse accordion>
      <a-collapse-panel
        v-for="folder in folders"
        :key="folder.id"
        :header="folder.name"
        @click="handlePanelClick(folder.id)"
      >
        <a-list
          v-if="questionsMap[folder.id]"
          :data-source="questionsMap[folder.id]"
          bordered
          :render-item="renderQuestion"
        />
        <a-empty v-else description="暂无题目" />
      </a-collapse-panel>
    </a-collapse>
  </a-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import axios from 'axios'
import { listByUserId1 } from '@/api/bizQuestionUserCollectionController'
const folders = ref([])
const questionsMap = reactive({}) // key: collectId, value: question list

const fetchFolders = async () => {
  try {
    const res = await axios.get('/collect/list')
    folders.value = res.data.data || []
  } catch (err) {
    message.error('加载收藏夹失败')
  }
}

const handlePanelClick = async (collectId) => {
  if (questionsMap[collectId]) return
  try {
    const res = listByUserId1()
    questionsMap[collectId] = res.data.data || []
  } catch (err) {
    message.error('加载题目失败')
  }
}

const renderQuestion = (item) => {
  return (
    <a-list-item>
      <a-list-item-meta
        title={`题目：${item.title || '无标题'}`}
        description={`题目ID：${item.id}`}
      />
    </a-list-item>
  )
}

onMounted(fetchFolders)
</script>
